<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>流浪动物救助系统</title>
    <link href="static/css/cubeportfolio.min.css" rel="stylesheet">
    <link href="static/css/owl.carousel.css" rel="stylesheet">
    <link href="static/css/owl.theme.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
    <link href="static/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <link href="static/css/IE8.css" rel="stylesheet">
    <![endif]-->
</head>

<body>
<!--头部-->
<jsp:include page="header.jsp"></jsp:include>
<!--幻灯片-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner silder-top" role="listbox">
        <div class="item active">
            <img src="static/images/banner1.jpg">
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <img src="static/images/banner2.jpg">
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <img src="static/images/banner3.jpg">
            <div class="carousel-caption">
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!--关于我们-->
<div class="about">
    <div class="container">
        <div class="title">
            <img src="static/images/h_1.png" class="title_img">
            <div class="title_top">
                <h2>关于我们</h2>
                <span>About Us</span>
            </div>
            <img src="static/images/h_2.png" class="title_img">
        </div>
        <div class="ab">
            <img src="static/images/ab.jpg" class="col-md-6 img-circle">
            <div class="col-md-6">
                <p class="p14">
                        每个生命都有尊严，都应得到尊重。然而生活中，我们总能看见夜晚路边的垃圾堆旁，几只毛茸茸又脏兮兮的小猫小狗躲在黑夜里寻找食物，为了改善流浪动物的生存条件，本系统是一个属于流浪动物的救助系统，让我们一起给流浪动物一个家，让流浪动物不再流浪。
                </p>

            </div>
        </div>
    </div>
</div>

<!--萌宠资讯-->
<diV class="news">
    <div class="container">
        <div class="title">
            <img src="static/images/h_1.png" class="title_img">
            <div class="title_top">
                <h2>宠物百科</h2>
                <span>Pet Encyclopedia</span>
            </div>
            <img src="static/images/h_2.png" class="title_img">
        </div>
        <div class="row">
            <div class="col-lg-5 col-md-5 col-sm-12 col-xs-12">
                <div id="news_slide" class="news_slide_box">
                    <div class="bd">
                        <ul>
                            <li>
                                <a class="pic" href="news_show33.html">
                                    <img src="static/images/news1.jpg" />
                                    <span class="title">
												老年宠物护理成新兴行业
											</span>
                                </a>
                            </li>
                            <li>
                                <a class="pic" href="news_show11.html">
                                    <img src="static/images/news2.jpg" />
                                    <span class="title">
												宠物月均消费高于人
											</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <span class="prev"></span>
                    <span class="next"></span>
                </div>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
                <ul class="news_list">
                    <li>
                        <div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
                            <a href="news_show44.html">
                                <img src="static/images/news3.jpg" />
                            </a>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                            <a href="news_show44.html" class="news_tit">宠物切莫“所托非人”</a>
                            <p class="news_time">2020-07-14</p>
                            <p class="news_desc">当前，随着饲养宠物的家庭增多，许多与宠物相关行业的店铺应运而生。作为一个新兴的行业 </p>
                        </div>
                    </li>
                    <li>
                        <div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
                            <a href="news_show88.html">
                                <img src="static/images/news4.jpg" />
                            </a>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                            <a href="news_show88.html" class="news_tit">如何通过牙齿推断猫咪的年龄</a>
                            <p class="news_time">2020-07-18</p>
                            <p class="news_desc">猫咪的年龄，主要以犬牙齿的生长情况、齿峰及牙齿的磨损程度、外形、颜色等综合判定。</p>
                        </div>
                    </li>
                    <li>
                        <div class="news_pic col-lg-3 col-md-3 col-sm-4 col-xs-12">
                            <a href="news_show66.html">
                                <img src="static/images/news5.jpg" />
                            </a>
                        </div>
                        <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
                            <a href="news_show66.html" class="news_tit">狗狗抑郁症的原因及解决办法</a>
                            <p class="news_time">2020-07-17</p>
                            <p class="news_desc">抑郁症这个词对于我们来说并不陌生，它是一种心理障碍。可是你知道吗？狗狗</p>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </div>
</diV>
<jsp:include page="footer.jsp"></jsp:include>


<!--回到顶部-->
<a class="top"><span class="glyphicon glyphicon-menu-up jiantou"></span></a>
<script src="static/js/jquery-3.1.1.min.js"></script>
<script src="static/js/main.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/TouchSlide.1.1.js"></script>
<script src="static/js/owl.carousel.js"></script>
<script src="static/js/jquery.cubeportfolio.min.js"></script>
<script src="static/js/portfolio-masonry-4col.js"></script>
<script>
    TouchSlide({
        slideCell: "#slideBox",
        titCell: ".hd li",
        mainCell: ".bd ul",
        effect: "leftLoop"
        //				autoPlay:true//自动播放
    });
    TouchSlide({
        slideCell: "#news_slide",
        mainCell: ".bd ul",
        effect: "leftLoop",
        autoPlay: true //自动播放
    });
</script>
</body>

</html>
